<!Doctype html>
<html>

<head>
    <title>oixan的博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
    <meta name="referrer" content="no-referrer" />
    <link rel="stylesheet" type="text/css" href="../css/blog.css">
    <script src="../js/echarts.min.js"></script>
</head>

<body>
    <div class="head">
        <div class="headnav">
            <div class="naveframe">
                <ul class="navlist">
                    <li>
                        <a href="../index.html">
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="../bloglist.html">
                            博客
                        </a>
                    </li>
                    <li>
                        <a href="../about.html">
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="headtext">
            <div class="headtext1">世界很简单，人类很复杂。</div>
            <div class="headtext2">浮生若梦，寻寻觅觅。</div>
        </div>
    </div>

    <div class="contents-all">
        <div class="contents">

            <div class="frame">
                <div class="title">
                    <h3>echarts关系图时钟</h3>
                </div>
                <div class="dtime">时间：2018-09-30</div>
                <div class="detail">

                    <p>可移动</p>
                    <div id="main" style="width:100%;height:600px;"></div>

    <script type="text/javascript">
        var w = new Array("日", "一", "二", "三", "四", "五", "六");
        var shiChen = new Array("【子时】夜半", "【丑时】鸡鸣", "【丑时】鸡鸣", "【寅时】平旦", "【寅时】平旦", "【卯时】日出", "【卯时】日出", "【辰时】食时", "【辰时】食时", "【巳时】隅中", "【巳时】隅中", "【午时】日中", "【午时】日中", "【未时】日昳", "【未时】日昳", "【申时】哺时", "【申时】哺时", "【酉时】日入", "【酉时】日入", "【戌时】黄昏", "【戌时】黄昏", "【亥时】人定", "【亥时】人定", "【子时】夜半");
        var sc = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
        var tianGan = ['癸', '甲', '乙', '丙', '丁', '戊', '已', '庚', '辛', '壬'];
        var diZhi = ['亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌'];
        var shengXiao = ['猪', '鼠 ', '牛 ', '虎 ', '兔 ', '龙 ', '蛇 ', '马 ', '羊 ', '猴 ', '鸡 ', '狗 '];

        function roundDatas(num) {
            var datas = [];
            for (var i = 0; i < num; i++) {
                var x = Math.cos(30 * i * Math.PI / 180);
                var y = Math.sin(30 * i * Math.PI / 180);
                datas.push({
                    name: i,
                    x: y,
                    y: -x
                });
            }
            return datas;
        }


        function roundDatas1(num) {
            var datas = [];
            for (var i = 0; i < num; i++) {
                var x = Math.cos(6 * i * Math.PI / 180);
                var y = Math.sin(6 * i * Math.PI / 180);
                datas.push({
                    name: i,
                    x: y,
                    y: -x
                });
            }
            return datas;
        }

        function roundDatas2(num) {
            var datas = [];
            for (var i = 0; i < num; i++) {
                var x = Math.cos(30 * i * Math.PI / 180);
                var y = Math.sin(30 * i * Math.PI / 180);
                datas.push({
                    name: sc[i],
                    x: y,
                    y: -x
                });
            }
            return datas;
        }

        function linkDatas(num) {
            var ldatas = [];
            for (var i = 0; i < num; i++) {
                ldatas.push({
                    source: i,
                    target: i + 1
                });
            }
            ldatas.push({
                source: (i - 1),
                target: 0
            });
            return ldatas;
        }

        function arrIndex(arr, a) {
            for (var l = 0; l < arr.length; l++) {
                if (arr[l] == a.charAt(1)) {
                    return l;
                }
            }
        }

        option = {
            backgroundColor: '#A9A9A9',
            title: {
                text: '',
                subtext: '',
                left: 50,
                top: '10%',
                //backgroundColor: '#ECECFF',
                borderRadius: 8,
                textStyle: {
                    color: '#2828FF',
                },
                subtextStyle: {
                    color: '#2894FF',
                }
            },

            legend: {
                x: '200',
                top: '18%',
                itemGap: 20,
                borderColor: '#6495ED',
                borderRadius: [5, 5, 5, 5],
                shadowColor: 'rgba(0, 245, 255, 0.8)',
                shadowBlur: 10,
                shadowOffsetX: 8,
                shadowOffsetY: -6,
                borderWidth: 1,
                selectedMode: false,
                textStyle: {
                    //color: '#102b6a',
                    color: '#00CACA'
                },
                data: ['时', '分', '秒', '时辰']
            },
            series: [

                {
                    name: '时',
                    type: 'graph',
                    roam: true,
                    draggable: true,
                    itemStyle: {
                        normal: {
                            color: '#694d9f'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#694d9f',
                            curveness: 1,
                            opacity: 0
                        }
                    },

                    symbol: 'circle',
                    symbolSize: 2,
                    top: '26%',
                    left: '24%',
                    width: '100',
                    height: '100',
                    data: roundDatas(12),
                    links: linkDatas(12)
                },

                {
                    name: '分',
                    type: 'graph',
                    roam: true,
                    itemStyle: {
                        normal: {
                            color: '#2585a6'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#2585a6',
                            curveness: 1,
                            opacity: 0
                        }
                    },

                    symbol: 'circle',
                    symbolSize: 2,
                    top: '36%',
                    left: '15%',
                    width: '100',
                    height: '100',
                    data: roundDatas1(60),
                    links: linkDatas(60)
                }, {
                    name: '秒',
                    type: 'graph',
                    roam: true,
                    itemStyle: {
                        normal: {
                            color: '#f173ac'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#f173ac',
                            curveness: 1,
                            opacity: 0
                        }
                    },

                    symbol: 'circle',
                    symbolSize: 2,
                    top: '40%',
                    left: '8%',
                    width: '130',
                    height: '130',
                    data: roundDatas1(60),
                    links: linkDatas(60)
                },


                {
                    name: '时辰',
                    type: 'graph',
                    roam: true,
                    draggable: true,
                    itemStyle: {
                        normal: {
                            color: '#94d6da'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}',
                            fontSize: 15,
                            textBorderColor: '#94d6da',
                            textBorderWidth: 1

                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#694d9f',
                            curveness: 1,
                            opacity: 0
                        }
                    },

                    symbol: 'circle',
                    symbolSize: 2,
                    top: '70%',
                    left: '20%',
                    width: '100',
                    height: '100',
                    data: roundDatas2(12),
                    links: linkDatas(12)
                },


            ]
        };


        function start() {
            myChart.setOption(option);
            var dt = new Date();
            var year = dt.getFullYear();
            var month = dt.getMonth() + 1;
            var week = dt.getDay();
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            var xs = Math.cos(6 * s * Math.PI / 180);
            var ys = Math.sin(6 * s * Math.PI / 180);
            var xm = Math.cos(6 * m * Math.PI / 180);
            var ym = Math.sin(6 * m * Math.PI / 180);
            var en = h;
            if (h > 12) {
                h = h - 12;
            }
            var xh = Math.cos(30 * h * Math.PI / 180);
            var yh = Math.sin(30 * h * Math.PI / 180);
            var en1 = arrIndex(sc, shiChen[en]);
            var tG = tianGan[(year - 3) % 10];
            var dZ = diZhi[(year - 3) % 12];
            var sX = shengXiao[(year - 3) % 12];


            for (var j = 0; j < s; j++) {
                var x1 = Math.cos(6 * j * Math.PI / 180);
                var y1 = Math.sin(6 * j * Math.PI / 180);
                option.series[2].data[j] = {
                    name: j,
                    symbol: 'arrow',
                    symbolSize: 1,
                    x: y1,
                    y: -x1
                };
            }
            for (var j = 59; j > s; j--) {
                var x1 = Math.cos(6 * j * Math.PI / 180);
                var y1 = Math.sin(6 * j * Math.PI / 180);
                option.series[2].data[j] = {
                    name: j,
                    symbol: 'arrow',
                    symbolSize: 5,
                    x: y1,
                    y: -x1
                };
            }
            //秒


            for (var j = 0; j < m; j++) {
                var x1 = Math.cos(6 * j * Math.PI / 180);
                var y1 = Math.sin(6 * j * Math.PI / 180);
                option.series[1].data[j] = {
                    name: j,
                    symbol: 'arrow',
                    symbolSize: 5,
                    x: y1,
                    y: -x1
                };
            }
            for (var j = 59; j > m; j--) {
                var x1 = Math.cos(6 * j * Math.PI / 180);
                var y1 = Math.sin(6 * j * Math.PI / 180);
                option.series[1].data[j] = {
                    name: j,
                    symbol: 'arrow',
                    symbolSize: 1,
                    x: y1,
                    y: -x1
                };
            } //分


            for (var j = 0; j < h; j++) {
                var x1 = Math.cos(30 * j * Math.PI / 180);
                var y1 = Math.sin(30 * j * Math.PI / 180);
                option.series[0].data[j] = {
                    name: j,
                    symbol: 'arrow',
                    symbolSize: 5,
                    x: y1,
                    y: -x1
                };
            }
            for (var j = 12; j > h; j--) {
                var x1 = Math.cos(30 * j * Math.PI / 180);
                var y1 = Math.sin(30 * j * Math.PI / 180);
                option.series[0].data[j] = {
                    name: j,
                    symbol: 'arrow',
                    symbolSize: 1,
                    x: y1,
                    y: -x1
                };
            } //时

            for (var j = 0; j < en1; j++) {
                option.series[3].data[j] = {
                    name: sc[j],
                    x: Math.sin(30 * j * Math.PI / 180),
                    y: -Math.cos(30 * j * Math.PI / 180),
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}',
                            fontSize: 15,
                            textBorderColor: '#94d6da',
                            textBorderWidth: 1

                        }
                    }
                }
            } //时辰

            /////////////////////////////////////////////////////////////

            option.series[2].data[s] = {
                name: s,
                //symbolSize: 20,
                x: ys,
                y: -xs,
                itemStyle: {
                    normal: {
                        color: '#f173ac'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        fontSize: 15,
                        textBorderColor: '#f173ac',
                        textBorderWidth: 3

                    }
                }
            };
            if (s == 0) {
                option.series[2].data[0] = {
                    name: '0',
                    //symbolSize: 20,
                    x: ys,
                    y: -xs,
                    label: {
                        normal: {
                            show: true,
                            formatter: '0',
                            fontSize: 15,
                            textBorderColor: '#f173ac',
                            textBorderWidth: 3

                        }
                    }
                }
            }; //秒

            option.series[1].data[m] = {
                name: m,
                //symbolSize: 25,
                x: ym,
                y: -xm,
                itemStyle: {
                    normal: {
                        color: '#2585a6'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        fontSize: 15,
                        textBorderColor: '#2585a6',
                        textBorderWidth: 3

                    }
                }
            };
            if (m == 0) {
                option.series[1].data[0] = {
                    name: '0',
                    //symbolSize: 25,
                    x: ym,
                    y: -xm,
                    label: {
                        normal: {
                            show: true,
                            formatter: '0',
                            fontSize: 20,
                            textBorderColor: '#2585a6',
                            textBorderWidth: 3

                        }
                    }
                }
            } //分

            option.series[0].data[h] = {
                name: h,
                //symbolSize: 30,
                x: yh,
                y: -xh,
                itemStyle: {
                    normal: {
                        color: '#694d9f'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        fontSize: 15,
                        textBorderColor: '#694d9f',
                        textBorderWidth: 5

                    }
                }
            };
            if (h == 0) {
                option.series[0].data[0] = {
                    name: '0',
                    //symbolSize: 30,
                    x: yh,
                    y: -xh,
                    label: {
                        normal: {
                            show: true,
                            formatter: '0',
                            fontSize: 15,
                            textBorderColor: '#694d9f',
                            textBorderWidth: 5

                        }
                    }
                }
            } //时


            option.series[3].data[en1] = {
                name: sc[en1],
                x: Math.sin(30 * en1 * Math.PI / 180),
                y: -Math.cos(30 * en1 * Math.PI / 180),
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        fontSize: 15,
                        textBorderColor: '#f58220',
                        textBorderWidth: 2

                    }
                }
            } //时辰

            option.title.text = year + '年' + month + '月' + day + '日';
            option.title.subtext = '星期' + w[week] + ' ' + shiChen[en] + '\n' + tG + dZ + '年' + '【' + sX + '年】';
            //正确干支纪年，生肖是按农历年算的.
            setTimeout(start, 100);

        }


        var myChart = echarts.init(document.getElementById('main'));
        //myChart.setOption(option);
        start();
    </script>
          
              </div>
                <a href="javascript:void(0)" onclick="showPg()">返回</a>
            </div>

        </div>
    </div>
    <div class="footer">
        <div class="footertext">©2018,oixan博客</div>
    </div>
    <span id="backtop" onclick="topFunction()">返回顶部</span>
    
</body>
<script  src="../js/fanhuiye.js"></script>

</html>